<script setup lang="ts">
//维修报价 - 研究版

//https://www.smartisan.com/support/#/serviceprice
import { reactive, ref, watch, watchEffect } from "vue";

import ServiceFrom from "@/base/service/serviceFrom.vue";
import ServiceTable from "@/base/service/serviceTable.vue";

import Data from "@/base/service/data/index.ts";
import { Phone, Transfer, Type, TabData } from "@/base/service/interface";

import Empty from "@/assets/base/service/empty@2x.png";
import R2 from "@/assets/base/service/r2.png";
import Pro3 from "@/assets/base/service/pro3.png";
import Pro2s from "@/assets/base/service/pro2s.png";
import JgR1 from "@/assets/base/service/r1.png";
import Jg from "@/assets/base/service/jg.png";

//准备数据
const meatData = ref(Data.meat);

//记录菜单选中值
const selected = reactive({
  device: 0, //设备
  component: 0, //部件
  memory: 0, //内存
  network: 0, //网络制式
});

/**
 * 记录选择的项目ID
 * @param data 项目值和子菜单ID
 */

const active = (data: Transfer) => {
  //当前对象在选项数组中的位置
  //const targetIndex = meatData.value.findIndex((obj) => obj.id === data.obj);
  const targetIndex = data.obj - 1;
  //存储选择值
  switch (targetIndex) {
    case 0:
      selected.device = data.child;
      break;
    case 1:
      selected.component = data.child;
      break;
    case 2:
      selected.memory = data.child;
      break;
    case 3:
      selected.network = data.child;
      break;
    default:
      console.log("错误");
  }
};

//默认图像
const deviceImg = ref(Empty);
/**
 * 修改设备图片
 */
watchEffect(() => {
  //准备展示图片
  switch (selected.device) {
    case 1:
      deviceImg.value = R2;
      break;
    case 2:
      deviceImg.value = Pro3;
      break;
    case 3:
      deviceImg.value = Pro2s;
      break;
    case 4:
      deviceImg.value = JgR1;
      break;
    case 5:
      deviceImg.value = Jg;
      break;
    default:
      deviceImg.value = Empty;
  }
});

//选中的设备对象
const deviceData = ref<Phone>();

//主要部件数据
const component = ref<Type[]>();
const memory = ref<Type[]>();
const network = ref<Type[]>();

//查询按钮状态
const btaActive = ref(false);

//设备发生变化
watch(
  () => selected.device,
  (newValue, oldValue) => {
    if (newValue != oldValue) {
      //下一个选项可选
      meatData.value[1].active = true;

      //当前已选中
      meatData.value[0].select = true;

      //其他显示默认值
      meatData.value[1].select = false;
      meatData.value[2].select = false;
      meatData.value[3].select = false;

      //准备当前设备信息
      deviceData.value = Data.phone.find((obj) => obj.id === selected.device);

      //主要部件
      component.value = deviceData.value?.component;

      //内存
      memory.value = deviceData.value?.memory;

      //网络 - 其他处理

      //表格传出 产品型号
      tabData.device = deviceData.value?.title;

      btaActive.value = false; //隐藏按钮
      activeTab.value = false; //隐藏表单
    }

    //清理已选过的数据信息
    selected.component = 0;
    selected.memory = 0;
    selected.network = 0;
    console.log("设备变化了");
  }
);

//部件发生变化
watch(
  () => selected.component,
  (newValue, oldValue) => {
    if (newValue != oldValue) {
      //控制下一选项是否可选
      if (newValue === 1) {
        meatData.value[2].active = true;
        btaActive.value = false; //修改状态
        activeTab.value = false; //隐藏表单
      } else {
        meatData.value[2].active = false;
      }

      //恢复默认显示
      if (selected.component !== 0) {
        //选择了值
        meatData.value[1].select = true;
        meatData.value[2].select = false;
        meatData.value[3].select = false;
      }

      //清空已选内容
      selected.memory = 0;
      selected.network = 0;

      //产品部件
      const componentObj = deviceData.value?.component.find(
        (obj) => obj.id === selected.component
      );

      //传递值给表格
      tabData.component = componentObj?.title;

      //有价格
      if (componentObj?.price !== undefined) {
        tabData.price = componentObj.price; //传递价格
        btaActive.value = true; //显示按钮
      }

      console.log("部件变化了");
    }
  }
);

//内存发生变化
watch(
  () => selected.memory,
  (newValue, oldValue) => {
    if (newValue != oldValue) {
      //当前选中的内存
      const memoryObj = deviceData.value?.memory?.find(
        (obj) => obj.id === selected.memory
      );

      //传递内存数据给表格
      tabData.memory = memoryObj?.title;

      //当前对象中有tag
      if (memoryObj?.tag !== undefined) {
        //传网络值
        network.value = deviceData.value?.network[memoryObj.tag];

        meatData.value[3].active = true; //下一栏可选

        btaActive.value = false; //修改状态
        activeTab.value = false; //隐藏表单
      } else {
        meatData.value[3].active = false;
      }

      //有价格
      if (memoryObj?.price !== undefined) {
        tabData.price = memoryObj.price; //传递价格
        btaActive.value = true; //开启按钮
      }

      //当前选中了
      if (selected.memory !== 0) {
        //修改下拉状态
        meatData.value[2].select = true; //当前可下拉
        meatData.value[3].select = false; //下列不可下拉
      }

      //重置网络信息
      selected.network = 0;
    }
  }
);

//网络发生变化
watch(
  () => selected.network,
  (newValue, oldValue) => {
    if (newValue != oldValue) {
      if (selected.network !== 0) {
        //选择了值
        meatData.value[3].select = true;
      }

      //拿到内存对象
      const memoryObj = deviceData.value?.memory.find(
        (obj) => obj.id === selected.memory
      );

      //产品网络
      if (memoryObj?.tag !== undefined) {

        //拿到对应网络对象
        const memoryData = deviceData.value?.network[memoryObj.tag];

        //选中的网络对象
        const networkData = memoryData?.find(
          (obj) => obj.id === selected.network
        );

        //传递网络信息给表格
        tabData.network = networkData?.title;

        //有价格
        if (networkData?.price !== undefined) {
          tabData.price = networkData.price; //传递价格
          btaActive.value = true; //展示按钮
        }

        console.log("网络发生变化");
      }
    }
  }
);

//表格数据
const tabData: TabData = reactive({
  device: "", //产品型号
  component: "", //主要部件
  memory: "", //内存
  network: "", //网络制式
  price: 0,
});

//表格展示
const activeTab = ref(false);

//查询维修报价 - 展示表格
const query = () => {
  activeTab.value = true;
  //准备数据
};

//单一展开菜单
const openMenu = ref(-1);
const myClick = (id: number) => {
  openMenu.value = id;
};
</script>
<template>
  <div class="content clearfix">
    <h1>维修报价</h1>
    <div class="price-content clearfix">
      <div class="clearfix">
        <img :src="deviceImg" class="product-image" />
        <div class="select-form">
          <ServiceFrom
            :meat="meatData[0]"
            :data="Data.device"
            @modify-state="active"
            @click="myClick(0)"
            :open="openMenu === 0 ? true : false"
          />
          <ServiceFrom
            :meat="meatData[1]"
            :data="component"
            @modify-state="active"
            @click="myClick(1)"
            :open="openMenu === 1 ? true : false"
          />
          <ServiceFrom
            :meat="meatData[2]"
            :data="memory"
            @modify-state="active"
            @click="myClick(2)"
            :open="openMenu === 2 ? true : false"
          />

          <ServiceFrom
            :meat="meatData[3]"
            :data="network"
            @modify-state="active"
            @click="myClick(3)"
            :open="openMenu === 3 ? true : false"
          />

          <button
            class="query-price"
            :class="btaActive && 'enable'"
            @click="query"
          >
            查询维修报价
          </button>
        </div>
      </div>
      <!-- 
  表格
-->
      <ServiceTable :data="tabData" v-show="activeTab" />

      <div class="statement" v-show="activeTab">
        <h4>特别提示</h4>
        <p>
          1、查询结果为维修参考价格，无法查询到的维修价格请咨询 400-603-5000
          或<a href="#">锤子商城维修门店</a>
        </p>
        <p>
          2、您可以前往就近的<a href="#" target="_blank">维修门店</a>，或登录
          锤子商城<a href="#" target="_blank">发起售后服务要求</a>；
        </p>
        <p>3、一台设备单次维修多个部件，只收取一次维修人工费。</p>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix:after,
.clearfix::before {
  content: "";
  display: block;
}
.content {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);
  padding-bottom: 30px;
  overflow: hidden;
  h1 {
    height: 60px;
    line-height: 60px;
    padding: 0 10px 0 28px;
    background: #f5f5f5;
    background: linear-gradient(#fff, #f5f5f5);
    border-bottom: 1px solid #dcdcdc;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.06);
    color: #646464;
    font-size: 18px;
  }
}
.price-content {
  display: block;
  height: 100%;
  padding: 60px;
}
.product-image {
  display: table;
  float: left;
  width: 358px;
  height: 358px;
  margin-right: 25px;
  padding: 0 25px;
  border: 1px solid #e8e8e8;
  background: #fcfcfc;
  border-radius: 7px;
  overflow: hidden;
}
.select-form {
  float: left;
  width: 430px;

  .query-price {
    width: 100%;
    height: 62px;
    border-radius: 7px;
    border: 1px solid #5c81e3;
    background-color: #5c85e5;
    background-image: linear-gradient(#779ae9, #5078df);
    cursor: not-allowed;
    font-size: 16px;
    color: #fff;
    opacity: 0.3;
  }
  .query-price.enable {
    opacity: 1;
    cursor: pointer;
  }
}
.statement {
  h4 {
    padding: 7px 0;
    color: #666;
    font-weight: 700;
    font-size: 14px;
  }
  p {
    padding: 0;
    line-height: 1.6;
    margin-bottom: 0;
    color: #666;
    font-size: 14px;
  }
  a {
    color: #5079d9;
  }
}

@media screen and (min-width: 737px) {
  .container {
    width: 1220px;
  }
}
</style>
